<template>
    <div 
        class="Yao"
        :style="styleObj"
        ref='Yao'
        :class="Type==1?'Yang':''"
        ></div>
</template>
<script>
// <Hex :Hex=1></Hex>
//         <Hex :Hex=2></Hex>
//         <Hex :Hex=3></Hex>
//         <Hex :Hex=4></Hex>
//         <Hex :Hex=5></Hex>
//         <Hex :Hex=6></Hex>
//         <Hex :Hex=7></Hex>
//         <Hex :Hex=8></Hex>
/**
 * @modules Yao
 * @desc 根据传入的i值选择不同的类
 * @author Sakura
 * @data 2020.08.24
 * @Attributes [Width] {String} 卦象宽度
 * @Attributes [i] {Number} 1||0,i==1时背景为黑色，为阳爻，否则为阴爻
 * @example 示例
 * <Hex width='100px' :Type='1'></Hex>
 */
export default {
    name:'Yao',
    props:{
        Width:{
            type:String,
            required:false,
            default:'100px'
        },
        Type:{
            type:Number,
            required:true,
        }
    },
    data(){
        return{
            selfWidth:'',
            styleObj:{
                width:'',
                height:'',
                borderLeftWidth:'',
                borderRightWidth:''
            }
        }
    },
    mounted(){
        this.Calc()
    },
    methods:{
        Calc(){
            // 接受%和px
             if(this.Width.indexOf('%')>-1){
                //传入的是百分比
                //将百分比赋值给元素块
                this.styleObj.width=this.Width
                /* 在数据变化后要执行的某个操作，
                而这个操作需要使用随数据改变而改变的DOM结构的时候，
                 这个操作都应该放进Vue.nextTick()的回调函数中。*/
                this.$nextTick(()=>{
                    //获得元素块的宽度
                    this.selfWidth=this.$refs.Yao.offsetWidth
                    this.CalcPx()
                })
             }else{
                this.selfWidth=parseInt(this.Width)
                this.CalcPx()
             }
            
        },
        // 计算高度，左右边框
        CalcPx(){
            // 设置最小宽度为10px
            this.selfWidth=this.selfWidth<10?10:this.selfWidth
            // 设置宽度
            this.styleObj.width=this.selfWidth+'px'
            //设置高度
            this.styleObj.height=this.selfWidth/8+'px'
            // 设置左边框
            this.styleObj.borderLeftWidth=this.selfWidth*0.4+'px'
            //设置右边框
            this.styleObj.borderRightWidth=this.selfWidth*0.4+'px'
        }      
    }
}
</script>
<style scoped>
.Yao{
    box-sizing: border-box;
    border: solid #000;
    border-top: none;
    border-bottom: none;
}
/* 阳爻背景为黑色，阴爻不设置 */
.Yang{
    background-color: #000;
}
</style>>